import React from 'react'
import *as Icon from '@ant-design/icons';
import { Layout, Menu,Button } from 'antd';
import './commonAside.css'
import config from '@/config';
  const { Sider } = Layout;
   //动态获取icon
   const iconEl  = v => React.createElement(Icon[v])
   // 处理菜单数据
   const items = config.map(v => {
       // 没有子菜单
       const child = {
        key:v.path,
        icon:iconEl(v.icon),
        label:v.lable,
        children:v.children && v.children.map(v => {
            return {
                key:v.path,
                icon:iconEl(v.icon),
                label:v.lable
            }
        })
       }
       return child
   })
export default function CommonAside({collapsed}) {
    
  return (
    <Sider trigger={null} collapsible collapsed={collapsed} style={{height:'100%',backgroundColor:'#232323'}}>
        <h3 style={{color:'#ccc',textAlign:"center"}}>{collapsed ? "后台" : "后台管理系统"}</h3>
        
      
      <Menu
        mode="inline"
        theme="dark"
        items={items}
        style={{border:"none",backgroundColor:'#232323'}}
      />
     </Sider>
  )
}
